<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="__PUBLIC__/Image/logo.ico">

    <title>账户安全</title>

    <!-- Bootstrap core CSS -->
    <link href="__PUBLIC__/Css/lib/bootstrap.min.css" rel="stylesheet" type="text/css">
     <!-- 自定义公共CSS -->
    <link href="__PUBLIC__/Css/Index/common.css" rel="stylesheet" type="text/css">
    <style type="text/css">
		body{
			line-height:1.1;
		}
		
		.strong{
			font-size:50px;
		}
		
		.small{
			font-size:25px;
		}
		
		 a{
			color:white;
			font-weight:bold;
		}
		
		.contains{
			background-color:#1BB5FF;
		}
		
		.btn:hover{
			color:#1BB5FF;
		}
		
		.title-btn{
			border-radius:10px;
			width:150px;
			margin-top:10px;
			background-color:white;
			height:35px;
			line-height:1;
			color:#1BB5FF;
			font-size:20px;
			font-weight:bold;
		}
		
		.label-alipayAccount,
		.label-pwd,
		.label-other,
		.label-info-other,
		.label-operation{
			color:#D0F9FC;
			font-size:15px;
			font-weight:100;
			padding-right: 0;
		}
		
		/*密码管理的标签*/
		.label-pwd{
			width:180px;
		}
		
		/*安全管理的标签*/
		.label-security{
			width: 85px;
			padding-right: 0;
			color:#D0F9FC;
			font-size:18px;
			font-weight:100;
		}
		
		/*其他管理的标签*/
		.label-other{
			width:auto;
		}
		
		/*其他管理的内容*/
		.label-info-other{
			width:auto;
			padding-left:0;
		}
		
		/*其他管理的操作*/
		.label-operation{
			color:#E0EE37;
		}
		
		/*绑定支付宝的标签*/
		.label-alipayAccount{
			width:auto;
		}
		
		/*密码管理输入框*/
		.input-pwd{
			border:2px solid white;
			background-color:#1BB5FF;
			border-radius:8px;
			font-size:20px;
			color:white;
		}
		
		/*安全管理的下拉框*/
		.select-security{
			border:2px solid white;
			background-color:#1BB5FF;
			font-size:20px;
			color:white;
			padding-top:1px;
		}
		
		/*安全管理的输入框*/
		.input-security{
			border:2px solid white;
			background-color:#1BB5FF;
			border-radius:8px;
			font-size:20px;
			color:white;
		}
		
		.personcenter-list{
			text-align:right;
			margin-top:30px;
			font-size:40px;
			margin-right:10px;
			line-height:50px;
		}
		
		@media screen and (max-height:800px){
			.personcenter-list{
				margin-right:5px;
				line-height:45px;
			}
		}
		
	</style>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <script src="__PUBLIC__/Js/lib/jquery-1.11.2.min.js"></script>
	<script src="__PUBLIC__/Js/lib/bootstrap.min.js"></script>
	<script src="__PUBLIC__/Js/Index/common.js"></script>
	<script type="text/javascript">
		$(function(){
			// 当焦点从当前密码输入框中离开时，检查当前密码是否输入正确
			$("input[name='oldPwd']").blur(function(){
				var oldPwd = $("input[name='oldPwd']").val();
				if($.trim(oldPwd) == ""){
					return false;
				}
				$.ajax({
  					url:"__URL__/checkOldPwd",
  					type:"post",
  					data:"oldpassword=" + oldPwd,
  					dataType:"json",
  					success:function(data){
  						if(data.status != 200){
  							//密码输入不正确
  							alert(data.message);
  							$("input[name='oldPwd']").focus();
  						}
  					},
  					error:function(data){
  						
  					}
  				});
			});
			
			// 保存修改的密码
			$("#alterPwdBtn").click(function(){
				var oldPwd = $("input[name='oldPwd']").val();
				if($.trim(oldPwd) == ""){
					alert("请先输入当前密码");
					$("input[name='oldPwd']").focus();
					return false;
				}
				var newPwd = $("input[name='newPwd']").val();
				if($.trim(newPwd) == ""){
					alert("请输入新密码");
					$("input[name='newPwd']").focus();
					return false;
				}
				if($.trim(newPwd).length < 6){
					alert("密码长度不能小于6个字符");
					$("input[name='newPwd']").focus();
					return false;
				}
				var confirmPwd = $("input[name='confrimNewPwd']").val();
				if(confirmPwd != newPwd){
					alert("两次输入的密码不一致");
					$("input[name='confrimNewPwd']").focus();
					return false;
				}
				$.ajax({
  					url:"__URL__/alterPwd",
  					type:"post",
  					data:"password=" + newPwd,
  					dataType:"json",
  					success:function(data){
  						if(data.status == 200){
  							//密码修改成功
  							alert(data.message);
  							window.location.href = "__URL__/accountSecurity";
  						} else {
  							alert(data.message);
  						}
  					},
  					error:function(data){
  						
  					}
  				});
			});
			
			// 点击【修改】
  			$(".editBtn").click(function(){
  				$(this).parents(".show_result").css("display","none");
  				$(this).parents(".show_result").siblings(".edit_result").css("display","block");
  			});
  			
  			// 点击修改状态下的【取消】按钮
  			$(".edit-cancel-btn").click(function(){
  				$(this).parents(".edit_result").css("display","none");
  				$(this).parents(".edit_result").siblings(".show_result").css("display","block");
  			});
  			
  			// 焦点移开事件
  			$(".check-value-exist").blur(function(event){
  				if($(event.relatedTarget).hasClass("edit-cancel-btn")){
  					return false;
  				}
  				// 检查对应的值是否存在
  				var key = $(this).attr("name");
  				var value= $(this).val();
  				$.ajax({
  					url:"__URL__/checkHasExistedRtnJson",
  					type:"post",
  					data:key + "=" + value,
  					dataType:"json",
  					success:function(data){
  						if(data.status == 200){
  							//已经存在
  							alert(data.message);
  							$(this).focus();
  						} 
  					},
  					error:function(data){
  						
  					}
  				});
  			});
  			
  			// 绑定支付宝
  			$("#saveAlipayBtn").click(function(){
  				var alipay = $("input[name='alipayAccount']").val();
  				if($.trim(alipay) == ""){
  					alert("请先输入支付宝帐号")
  					$("input[name='alipayAccount']").focus();
  					return false;
  				}
  				$.ajax({
  					url:"__URL__/saveAlipay",
  					type:"post",
  					data:"alipay=" + alipay,
  					dataType:"json",
  					success:function(data){
  						if(data.status == 200){
  							//绑定成功
  							alert(data.message);
  							$(this).focus();
  						} else {
							// 绑定失败
							alert(data.message);
						}
  					},
  					error:function(data){
  						
  					}
  				});
  			});
  			
  			// 提交密保问题设定
  			$("#securityBtn").click(function(){
  				var question_1 = $("select[name='question_1'] :selected").val();
  				var question_2 = $("select[name='question_2'] :selected").val();
  				var question_3 = $("select[name='question_3'] :selected").val();
  				if(question_1 == 0 || question_2 == 0 || question_3 == 0){
  					alert("请选择密保问题！");
  					return false;
  				}
  				if(question_1 == question_2 || question_1 == question_3 || question_2 == question_3){
  					alert("密保问题不能相同！");
  					return false;
  				}
  				
  				var answer_1 = $("input[name='answer_1']").val();
  				var answer_2 = $("input[name='answer_2']").val();
  				var answer_3 = $("input[name='answer_3']").val();
  				if($.trim(answer_1) == "" || $.trim(answer_2) == "" || $.trim(answer_3) == ""){
  					alert("请填写密保问题答案！");
  					return false;
  				}
  				if($.trim(answer_1).length > 100){
  					alert("答案长度不能大于100字！");
  					$("input[name='answer_1']").focus();
  					return false;
  				}
  				if($.trim(answer_2).length > 100){
  					alert("答案长度不能大于100字！");
  					$("input[name='answer_2']").focus();
  					return false;
  				}
  				if($.trim(answer_3).length > 100){
  					alert("答案长度不能大于100字！");
  					$("input[name='answer_3']").focus();
  					return false;
  				}
  				
  				$.ajax({
  					url:"__URL__/setSecurity",
  					type:"post",
  					data:"question_1=" + question_1 + "&question_2=" + question_2 + "&question_3=" + question_3 + "&answer_1=" + answer_1 + "&answer_2=" + answer_2 + "&answer_3=" + answer_3,
  					dataType:"json",
  					success:function(data){
  						if(data.status == 200){
  							//设置成功
  							alert(data.message);
  							window.location.href = "__URL__/accountSecurity";
  						} else {
  							alert(data.message);
  						}
  					},
  					error:function(data){
  						
  					}
  				});
  				
  			});
		});
		
		// 修改手机
  		function changePhone(){
  			var phone = $("input[name='phone']").val();
  			if($.trim(phone) == ""){
  				alert("请填写手机号!");
  				return false;
  			}
  			$.ajax({
					url:"__URL__/savePhone",
					type:"post",
					data:"phone=" + phone,
					dataType:"json",
					success:function(data){
						if(data.status == 200){
							//修改成功
							alert(data.message);
							$("input[name='phone']").parents(".edit_result").siblings(".show_result").find("span").text(phone);
							$("input[name='phone']").parents(".edit_result").css("display","none");
			  				$("input[name='phone']").parents(".edit_result").siblings(".show_result").css("display","block");
						} else {
							// 修改失败
							alert(data.message);
						}
					},
					error:function(data){
						
					}
				});
  		}
		
		// 设置邮箱
		function setEmail(){
			var email = $("input[name='email']").val();
  			if($.trim(email) == ""){
  				alert("请填写邮箱!");
  				return false;
  			}
  			// 验证邮箱格式是否正确
			var reg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
		    if(!reg.test(email)){
		        alert("邮箱格式错误，请重新填写");
		        $("input[name='email']").focus();
		        return false;
		    }
  			$.ajax({
					url:"__URL__/setEmail",
					type:"post",
					data:"email=" + email,
					dataType:"json",
					success:function(data){
						if(data.status == 200){
							//已经存在
							alert(data.message);
							$("input[name='email']").parents(".edit_result").siblings(".show_result").find("label").text(email);
							$("input[name='email']").parents(".edit_result").css("display","none");
			  				$("input[name='email']").parents(".edit_result").siblings(".show_result").css("display","block");
						} 
					},
					error:function(data){
						
					}
				});
		}
		
		
	</script>
  </head>

  <body>
<div class="myContainer col-xs-12 col-sm-12 col-md-12 col-lg-12">
	  <div class="row whole-row" style="height:550px;">
	  		<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 contains" style="height:100%;width:75%;">
	  			<!-- 左侧区域 -->
	  			<div class="col-xs-7 col-sm-7 col-md-7 col-lg-7" style="border-right:2px solid white;height:100%;">
		  			<div class="row">
		  				<div  class="btn title-btn" style="">密码管理</div>
			  			<form class="form-horizontal" role="form">
						   <div class="form-group">
						      <label for="oldPwd" class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label label-pwd" style="text-align:left;">请输入帐号当前的密码:</label>
						      <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">
						         <input type="password" class="form-control input-pwd" name="oldPwd" id="oldPwd"> 
						      </div>
						   </div>
						  <div class="form-group">
						      <label for="newPwd" class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label label-pwd" style="text-align:left;">请 输入 要修改的密码:</label>
						      <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">
						         <input type="password" class="form-control input-pwd" name="newPwd" id="newPwd">
						      </div>
						   </div>
						   <div class="form-group" style="margin-bottom:0;">
						      <label for="confrimNewPwd" class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label label-pwd" style="text-align:left;">请 确认 要修改的密码:</label>
						      <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">
						         <input type="password" class="form-control input-pwd" name="confrimNewPwd" id="confrimNewPwd">
						      </div>
						   </div>
						   <div class="form-group">
						      <div class="col-xs-offset-2 col-xs-9 col-sm-offset-2 col-sm-9
						       col-md-offset-2 col-md-9 col-lg-offset-2 col-lg-9">
						         <button type="button" id="alterPwdBtn" class="btn title-btn" style="float:right;width:80px;">确认</button>
						      </div>
						   </div>
						</form>
		  			</div>
		  			<div class="row">
		  				<div  class="btn title-btn" style="margin-top:-60px;">安全问题</div>
		  				<form class="form-horizontal" role="form">
						   <div class="form-group">
						      <label for="" class="col-xs-2 col-sm-2 col-md-2 col-lg-2 control-label label-security" style="text-align:left;">问题一:</label>
						      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
						         <select class="form-control select-security" name="question_1">
						         	<option value="0">请选择密保问题</option>
						         	<foreach name="question_list" item="question">
						         		<option value="{$question.id}">{$question.question}</option>
						         	</foreach>
						         </select> 
						      </div>
						   </div>
						   <div class="form-group">
						      <label for="answer_1" class="col-xs-2 col-sm-2 col-md-2 col-lg-2 control-label label-security" style="">答案:</label>
						      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
						         <input type="text" class="form-control input-security" name="answer_1" id="answer_1">
						      </div>
						    </div>
						  <div class="form-group">
						      <label for="" class="col-xs-2 col-sm-2 col-md-2 col-lg-2 control-label label-security" style="text-align:left;">问题二:</label>
						      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
						         <select class="form-control select-security" name="question_2">
						         	<option value="0">请选择密保问题</option>
						         	<foreach name="question_list" item="question">
						         		<option value="{$question.id}">{$question.question}</option>
						         	</foreach>
						         </select> 
						      </div>
						   </div>
						   <div class="form-group">
						      <label for="answer_2" class="col-xs-2 col-sm-2 col-md-2 col-lg-2 control-label label-security" style="">答案:</label>
						      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
						         <input type="text" class="form-control input-security" name="answer_2" id="answer_2">
						      </div>
						    </div>
						   <div class="form-group">
						      <label for="" class="col-xs-2 col-sm-2 col-md-2 col-lg-2 control-label label-security" style="text-align:left;">问题三:</label>
						      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
						         <select class="form-control select-security" name="question_3">
						         	<option value="0">请选择密保问题</option>
						         	<foreach name="question_list" item="question">
						         		<option value="{$question.id}">{$question.question}</option>
						         	</foreach>
						         </select> 
						      </div>
						   </div>
						   <div class="form-group">
						      <label for="answer_3" class="col-xs-2 col-sm-2 col-md-2 col-lg-2 control-label label-security" style="">答案:</label>
						      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
						         <input type="text" class="form-control input-security" name="answer_3" id="answer_3">
						      </div>
						    </div>
						   <div class="form-group">
						      <div class="col-xs-offset-9 col-xs-2 col-sm-offset-9 col-sm-2 
						      col-md-offset-9 col-md-2 col-lg-offset-9 col-lg-2" style="margin-top:-50px;">
						         <button type="button" id="securityBtn" class="btn title-btn" style="float:right;width:80px;">确认</button>
						      </div>
						   </div>
						</form>
		  			</div>
	  			</div>
	  			
	  			<!-- 右侧区域 -->
	  			<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5" style="height:100%;">
	  				<div class="row" style="margin-left:0;">
	  					<div  class="btn title-btn" style="">其他管理</div>
	  					<form class="form-horizontal" role="form">
						   <div class="form-group">
						      <label  class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label label-other" style="text-align:left;">注册手机:</label>
						      <div style="display:block;" class="show_result">
					      		<label  class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label label-info-other" id="registeredPhone" style="text-align:left;">{$user.phone}</label>
					      		<a href="#" class="col-xs-3 col-sm-3 col-md-3 col-lg-3  control-label label-operation editBtn" style="text-align:left;">更换手机</a>
						      </div>
						      <div style="display:none;" class="edit_result">
							      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 info">
							         <input type="text" class="form-control int check-value-exist" name="phone" id="phone" maxlength=11 value="{$user.phone}"> 
							      </div>
							      <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 info" style="padding:0;">
							         <button type="button" class="btn btn-primary edit-control-btn edit-confirm-btn" style="" onclick="changePhone();">确定</button>
					      			 <button type="button" class="btn btn-primary edit-control-btn edit-cancel-btn" style="">取消</button>
							      </div>
						      </div>
						   </div>
						  <div class="form-group">
						      <label  class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label label-other" style="text-align:left;">注册邮箱:</label>
						      <div style="display:block;" class="show_result">
					      		<label  class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label label-info-other" id="registeredEmail" style="text-align:left;width:auto;max-width:250px;">{$user.email}</label>
					      		<a href="#" class="col-sm-3 col-md-3 col-lg-3  control-label label-operation editBtn" style="text-align:left;">设置邮箱</a>
						      </div>
						      <div style="display:none;" class="edit_result">
							      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 info">
							         <input type="text" class="form-control" name="email" id="email" value="{$user.email}"> 
							      </div>
							      <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 info" style="padding:0;">
							         <button type="button" class="btn btn-primary edit-control-btn edit-confirm-btn" style="" onclick="setEmail();">确定</button>
					      			 <button type="button" class="btn btn-primary edit-control-btn edit-cancel-btn" style="">取消</button>
							      </div>
						      </div>
						   </div>
						   <div class="form-group">
						      <label  class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label label-other" style="text-align:left;">上次登录:</label>
						      <label  class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label label-info-other" style="text-align:left;width:200px;">{$user.prev_login_time}</label>
						   </div>
						   <div class="form-group">
						      <label  class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label label-other" style="text-align:left;">IP地址:</label>
						      <label  class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label label-info-other" style="text-align:left;">{$user.prev_ip}</label>
						   </div>
						   <div class="form-group">
						      <label  class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label label-other" style="text-align:left;">登录地点:</label>
						      <label  class="col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label label-info-other" style="text-align:left;">{$user.prev_login_location}</label>
						   </div>
						</form>
	  				</div>
	  				
	  				<div class="row" style="margin-left:0;">
	  					<div  class="btn title-btn" style="margin-bottom:10px;">绑定支付宝</div>
	  					<form class="form-horizontal" role="form">
						   <div class="form-group">
						      <label for="alipayAccount" class="col-xs-3 col-sm-3 col-md-3col-lg-3 control-label label-alipayAccount" style="text-align:left;">支付宝账号:</label>
						      <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
						         <input type="text" class="form-control input-pwd" name="alipayAccount" id="alipayAccount" value="{$user.alipay}"> 
						      </div>
						   </div>
						   <div class="form-group">
						      <div class="col-xs-offset-2 col-xs-9 col-sm-offset-2 col-sm-9
						       col-md-offset-2 col-md-9 col-lg-offset-2 col-lg-9">
						         <button type="button" id="saveAlipayBtn" class="btn title-btn" style="float:right;width:80px;">确认</button>
						      </div>
						   </div>
						</form>
	  				</div>
	  			</div>
			</div>
			<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 contains" style="height:100%;margin-left:20px;width:22%;">
				<div class="row" style="color:white;text-align:center;padding-top:80px;">
					<strong class="strong">账户安全</strong><br>
	  				<strong class="small">account security</strong>
				</div>
				<div class="row personcenter-list" style="">
					<strong><a href="{:U('Index/personalProfile')}">个人资料</a></strong><br>
					<strong><a href="{:U('Index/myMessages')}">我的消息</a></strong><br>
					<strong><a href="{:U('Index/myOrders')}">我的订单</a></strong><br>
					<strong><a href="{:U('Index/releaseNotes')}">发布游记</a></strong><br>
					<strong><a href="{:U('Index/travelNotes')}">我的游记</a></strong>
				</div>
			</div>
	  </div>
      <div style="margin-top:30px;">
	  	<include file="Public:footer" />
	  </div>
</div>
  </body>
</html>
